<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			ul,li{list-style: none;}
			#cha{
				display: inline-block;
			}
		</style>
		<script>
			window.onload = function(){
				var b = document.getElementById("xun");
				b.onclick = function(){
					var bj = document.getElementById("bj");
					alert(bj.innerHTML);
				}
				
				var xun1 = document.getElementById("xun1");
				xun1.onclick = function(){
					// getElementsByTagName通过标签名来获取元素节点
					//会返回一个类数组对象，所查询的元素会封装到对象中
					var lis = document.getElementsByTagName("li");
					for(var i = 0; i<lis.length; i++){
						alert(lis[i].innerHTML);
					}
				}
				
				var xun2 = document.getElementById("xun2");
				xun2.onclick = function(){
					var name = document.getElementsByName("gender");
					//alert(name.length);
					/*
					 innerHTML用于获取元素内部的HTML代码
					 如果需要读取元素节点属性，直接使用元素.属性名
					     例如：元素.id  元素.name  元素.value
						 但是class属性不能使用该方法读取，需要用元素.className
					 */
					for(var i=0; i<name.length; i++){
						alert(name[i].className);
					}
				}
			}
		</script>
	</head>
	<body>
		<!-- getElementById
		     -通过id属性来获取一个元素节点对象
			 getElementsByTagName
			 -通过标签名开获取一组元素节点对象
			 getElementByName
			 -通过name属性来获取一组元素节点对象
		-->
		<div>
			<ul>
				<li id="bj">北京</li>
				<li>上海</li>
				<li>广州</li>
			</ul>
		</div>
		<div id="cha">
			<ul>
				<button id="xun">查询北京</button><br />
				<button id="xun1">查询li</button><br />
				<button id="xun2">查询name</button>
			</ul>
		</div>
		<div class="inner">
			gender:
			<input type="radio" name="gender" value="male" />
			Male
			<input type="radio" name="gender" value="female" />
			Female
		</div>
	</body>
</html>
